<template>
	<view class="content">
		<view class="avatorWrapper">
			<view class="avator">
				<image class="img" src="/static/logo1.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="form">
			<u-form :model="HongUser" :rules="rules" ref='myForm'>
				<u-form-item label="用户名" prop="userName" label-width="100rpx">
					<u-input v-model="HongUser.userName" border="surround" clearable></u-input>
				</u-form-item>
				<u-form-item label="手机号" prop="phone" labelWidth="100rpx">
					<u-input v-model="HongUser.phone" border="surround" clearable></u-input>
				</u-form-item>
				<u-form-item label="密码" prop="password" labelWidth="100rpx">
					<u-input password v-model="HongUser.password" border="surround" clearable></u-input>
				</u-form-item>
				<u-form-item label="确认密码" prop="password1" labelWidth="110rpx">
					<u-input password v-model="HongUser.password1" border="surround" clearable></u-input>
				</u-form-item>
				<u-form-item label="验证码" prop="verCode" labelWidth="100rpx">
					<u-input v-model="HongUser.verCode" border="surround" clearable></u-input>
				</u-form-item>
			</u-form>
			<canvas :style="{width:width+'px',height:height+'px'}" canvas-id="imgcanvas"
				@error="canvasIdErrorCallback"></canvas>
			<button size="mini" @click="refresh()">获取验证码</button>
			<button @click="register" class="button-login" hover-class="button-hover">注册</button>
			<view class="forgotBtn">
				<navigator url="/pages/zfuser/login" hover-class="navigator-hover">
					<text>返回登录</text>
				</navigator>
			</view>
		</view>
	</view>
</template>
<script>
	// import request from '../../request.js'
	export default {
		data() {	
		
		let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
		    if (!this.oldPhone) {      //判断如果手机号为空，提示用户输入手机号
		        uni.showToast({
		            title: '请输入手机号码',
		            icon: 'none'
		        })
		    return
		    } else if (!reg.test(this.oldPhone)) {        //判断手机号格式时候正确
		        uni.showToast({
		        title: '手机号码不正确',
		        icon: 'none'
		        })
		};
			return {
				verCode: "", //验证码
				width: 120,
				height: 45,
				HongUser: {
					userName: '',
					password: '',
					phone: '',
					password1: '',
					verCode: ""
				},
				pw1: '',
				pw2: '',
				
				rules: {
					'userName': [{
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change']
					}],
					'phone': [{
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					}, {
						type: 'string',
						required: true,
						message: '请输入正确的手机号',
						trigger: ['blur', 'change'],
						min: 11,
						max: 11
					}],
					'password': [{
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change'],
					}],
					'password1': [{
							type: 'string',
							required: true,
							message: '请填写确认密码',
							trigger: ['blur', 'change'],
						},
						{
							trigger: 'blur',
							validator: (rule, value, callback) => {
								if (value !== this.HongUser.password) {
									callback(new Error('两次输入密码不一致'))
								} else {
									callback()
								}
							}
						}
					],
					'verCode': [{
							type: 'string',
							required: true,
							message: '请填写验证码',
							trigger: ['blur', 'change'],
						},
						{
							trigger: 'blur',
							validator: (rule, value, callback) => {
								if (value.toLowerCase() !== this.verCode.toLowerCase()) {
									callback(new Error('验证码不正确'))
								} else {
									callback()
								}
							}
						}
					]
				},
			}
		},
		onLoad(option) {
			this.refresh()
		},
		methods: {
			register() {
				this.$refs.myForm.validate().then(res => {
					console.log(this.HongUser)
					request({
						url: 'zfuser/ZfUser/register',
						data: {
							userName: this.HongUser.userName,
							password: this.HongUser.password,
							phone: this.HongUser.phone
						},
						method: 'POST',
						success: (res) => {

							console.log('验证通过');
							//验证通过就登录
							if (res.data.code == 20000) {
								console.log(res)
								uni.showToast({
									title: '注册成功',
									icon: 'success'
								})
								/* 页面跳转 */
								setTimeout(() => {
									uni.redirectTo({
										url: '/pages/zfuser/login'
									})
								}, 1000)
							} else {
								uni.showToast({
									title: '用户名已存在或注册失败',
									icon: 'error'
								})
							}
						}
					})
				})
			},

			// 初始化验证码
			init: function() {
				console.log('start');
				var context = uni.createCanvasContext('imgcanvas', this),
					w = this.width,
					h = this.height;
				context.setFillStyle("white");
				context.setLineWidth(5);
				context.fillRect(0, 0, w, h);
				var pool = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "I", "M", "N", "O", "P", "Q",
						"R", "S",
						"T", "U", "V", "W", "S", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"
					],
					str = '';
				for (var i = 0; i < 4; i++) {
					var c = pool[this.rn(0, pool.length - 1)];
					var deg = this.rn(-30, 30);
					context.setFontSize(18);
					context.setTextBaseline("top");
					context.setFillStyle(this.rc(80, 150));
					context.save();
					context.translate(30 * i + 15, parseInt(h / 1.5));
					context.rotate(deg * Math.PI / 180);
					context.fillText(c, -15 + 5, -15);
					context.restore();
					str += c;
				}
				this.verCode = str,
					console.log(this.verCode)
				// uni.setStorage({
				// 	key: 'imgcode',
				// 	data: str,

				// });
				for (var i = 0; i < 40; i++) {
					context.beginPath();
					context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);
					context.closePath();
					context.setFillStyle(this.rc(150, 200));
					context.fill();
				}
				context.draw();
				console.log('end');
			},
			rc: function(min, max) {
				var r = this.rn(min, max);
				var g = this.rn(min, max);
				var b = this.rn(min, max);
				return "rgb(" + r + "," + g + "," + b + ")";
			},
			rn: function(max, min) {
				return parseInt(Math.random() * (max - min)) + min;
			},
			refresh: function() {
				this.init();
			},
			canvasIdErrorCallback: function(e) {
				console.error(e.detail.errMsg)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: #77B307;
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 50rpx;
	}

	.content {
		background: #377EB4;
		width: 100vw;
		height: 100vh;
	}

	.avatorWrapper {
		height: 30vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.avator {
		width: 200upx;
		height: 200upx;
		overflow: hidden;
	}

	.avator .img {
		width: 100%
	}

	.form {
		padding: 0 100upx;
		margin-top: 80px;
	}

	.inputWrapper {
		width: 100%;
		height: 80upx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
	}

	.inputWrapper .input {
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 15px;
	}

	.loginBtn {
		width: 100%;
		height: 80upx;
		background: #77B307;
		border-radius: 50upx;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.loginBtn .btnValue {
		color: white;
	}

	.forgotBtn {
		text-align: center;
		color: #EAF6F9;
		font-size: 15px;
		margin-top: 20px;
	}
</style>
